﻿'use client'

import { useState } from 'react'
import { FileText, RotateCcw, RefreshCw } from 'lucide-react'

const loremWords = [
  'lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipiscing', 'elit',
  'sed', 'do', 'eiusmod', 'tempor', 'incididunt', 'ut', 'labore', 'et', 'dolore',
  'magna', 'aliqua', 'enim', 'ad', 'minim', 'veniam', 'quis', 'nostrud'
]

export default function LoremIpsumGeneratorPage() {
  const [output, setOutput] = useState('')
  const [count, setCount] = useState(3)
  const [type, setType] = useState('paragraphs')

  const generateWords = (wordCount: number): string => {
    const words = ['Lorem']
    for (let i = 1; i < wordCount; i++) {
      words.push(loremWords[Math.floor(Math.random() * loremWords.length)])
    }
    return words.join(' ') + '.'
  }

  const generateSentences = (sentenceCount: number): string => {
    const sentences = []
    for (let i = 0; i < sentenceCount; i++) {
      const sentenceLength = Math.floor(Math.random() * 15) + 5
      const sentence = generateWords(sentenceLength).replace(/\.$/, '') + '.'
      sentences.push(sentence.charAt(0).toUpperCase() + sentence.slice(1))
    }
    return sentences.join(' ')
  }

  const generateParagraphs = (paragraphCount: number): string => {
    const paragraphs = []
    for (let i = 0; i < paragraphCount; i++) {
      const sentenceCount = Math.floor(Math.random() * 5) + 3
      paragraphs.push(generateSentences(sentenceCount))
    }
    return paragraphs.join('\n\n')
  }

  const generateLorem = () => {
    let result = ''
    switch (type) {
      case 'words': result = generateWords(count); break
      case 'sentences': result = generateSentences(count); break
      case 'paragraphs': result = generateParagraphs(count); break
    }
    setOutput(result)
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Lorem Ipsum 生成器</h1>
          <p className="text-gray-600">生成Lorem Ipsum占位文本，支持多种格式和自定义选项</p>
        </div>

        <div className="mb-6 flex gap-4">
          <button
            onClick={generateLorem}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2"
          >
            <FileText className="w-4 h-4" />
            生成文本
          </button>
          <button
            onClick={generateLorem}
            className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 flex items-center gap-2"
          >
            <RefreshCw className="w-4 h-4" />
            重新生成
          </button>
          <button
            onClick={() => setOutput('')}
            className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 flex items-center gap-2"
          >
            <RotateCcw className="w-4 h-4" />
            清空
          </button>
        </div>

        <div className="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">生成类型</label>
            <select
              value={type}
              onChange={(e) => setType(e.target.value)}
              className="w-full p-2 border border-gray-300 rounded-md"
            >
              <option value="paragraphs">段落</option>
              <option value="sentences">句子</option>
              <option value="words">单词</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">数量</label>
            <input
              type="number"
              value={count}
              onChange={(e) => setCount(parseInt(e.target.value) || 1)}
              min="1"
              max="100"
              className="w-full p-2 border border-gray-300 rounded-md"
            />
          </div>
        </div>

        <div className="mb-6">
          <label className="block text-sm font-medium text-gray-700 mb-2">
            生成的Lorem Ipsum文本 ({count} {
              type === 'paragraphs' ? '段落' :
              type === 'sentences' ? '句子' : '单词'
            })
          </label>
          <textarea
            value={output}
            readOnly
            rows={15}
            className="w-full p-3 border border-gray-300 rounded-lg bg-gray-50 font-mono text-sm"
            placeholder="生成的Lorem Ipsum文本将在这里显示..."
          />
        </div>

        <div className="bg-gray-50 p-4 rounded-lg">
          <h4 className="font-medium text-gray-900 mb-2">快速生成</h4>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button
              onClick={() => { setType('paragraphs'); setCount(3); setTimeout(generateLorem, 100) }}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">标准段落</div>
              <div className="text-xs text-gray-500 mt-1">3个段落的标准Lorem Ipsum</div>
            </button>
            <button
              onClick={() => { setType('sentences'); setCount(5); setTimeout(generateLorem, 100) }}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">短文本</div>
              <div className="text-xs text-gray-500 mt-1">5个句子的简短文本</div>
            </button>
            <button
              onClick={() => { setType('words'); setCount(50); setTimeout(generateLorem, 100) }}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">单词列表</div>
              <div className="text-xs text-gray-500 mt-1">50个随机单词</div>
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
